<template>
  <div class="editInformation">
    <h1 class="editInformation-title tc">修改资料</h1>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" label-position="right">
      <el-form-item label="用户名" prop="name" >
        <el-input class="email_inp" v-model="form.name"  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div class="btns clearfloat">
      <el-button type="primary" class="fr submit" @click="submit('ruleForm')">提交</el-button>
      <el-button type="primary" plain class="fr cancel" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getUserInfo, updateUser, getMyInfo } from "~/api/user";
import aes from "~/util/aes.js";
export default {
  data() {

    var nickname = (rule, value, callback) => {
      if (value == '') {
        callback()
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      title: "修改资料",
      form: {
        name: ''
      },
      rules: {
        name: [{ required: true, validator: nickname, trigger: "blur" }],
      },
    }
  },
  created () {
    this.initialization()
  },
  methods: {
    async getMyinfo () {
      let myInfo = await getMyInfo(this.$axios);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data);
      }
    },
    initialization() {
      this.form.name = this.$store.state.user.name; //用户ID

    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let obj = {
            guard: 'company'
          }
          if (this.form.name  != this.$store.state.user.name) {
            obj.name = this.form.name
          }

          updateUser(this.$axios, obj)
            .then(res => {
              if (res.data.code == 200) {
                this.$alert('修改成功！', '提示', {
                  confirmButtonText: '确定',
                  type:'success',
                  center: true,
                  callback: action => {
                  }
                })
                this.getMyinfo()
                
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            })
            .catch(err => {
              this.$message({
                message: err,
                type: "error"
              });
      
            });
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    cancel() {
      this.resetForm("ruleForm")
      this.$router.push({path:'/company/home' })
    }
  }
}
</script>

<style lang='less' scoped>
  .editInformation {
    width: 100%;
    height: 100%;
    padding-top: 60px;
    background: #fff;

    &-title {
      font-size: 20px;
    }
    .el-form {
      width: 450px;
      margin: 50px auto 0;
      .el-form-item {
        margin-bottom: 40px;
        .el-input {
          width: 325px;
        }
      }
    }
    .btns {
      margin-top: 40px;
      padding-right: 53px;
      .el-button {
        margin-left: 0;
        margin-right: 20px;
        padding: 8px 22px 8px 22px;
        font-size: 15px;
        border-radius: 5px;
      }
      

      .submit {
        background: #249DFF;
        color: #fff;
        margin-right: 0;
      }
      .cancel {
        border:1px solid rgba(36,157,255,1);
        background:rgba(255,255,255,1);
        color: #249DFF;
      }
    }
  }
    
</style>